<template>
  <p-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="width"
  >
    <div class>
      <p-spin :spinning="confirmLoading">
        <p-form :form="form">
          <template v-for="(item, index) in queryInfo" >
            <p-form-item
              :label="item.title"
              :labelCol="labelCol"
              v-if="item.fieldShowType === 'String' || item.fieldShowType === 'text'"
              :wrapperCol="wrapperCol"
            >
              <p-input
                :placeholder="'请输入'+item.title"
              
                v-decorator="[ item.dataIndex,
                {
                  initialValue: item.defaultValue ,
                  rules:[
                   {
                      required: item.fieldMustInput == '1' ? true :false,
                      message: '请填写完整',
                    },
                  ]
                }
                ]"
              ></p-input>
            </p-form-item>

            <p-form-item
              :label="item.title"
              v-else-if="item.fieldShowType === 'list' || item.fieldShowType === 'list_multi'"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
			     <template v-if="!item.customRender" >
              <p-select
                showSearch
                allowClear
                :options="dictOptions[item.customRender]"
                v-decorator="[ item.dataIndex,
                {
                  initialValue: item.defaultValue ,
                  rules:[
                   {
                      required: item.fieldMustInput == '1' ? true :false,
                      message: '请填写完整',
                    },
                  ]
                }
                ]"
              ></p-select>
            </template>
            <template v-else>
              <j-dict-select-tag
              v-model="formData[item.dataIndex]"
              :dictCode="item.customRender"
              :placeholder="'请输入'+item.title"
              />
            </template>
            </p-form-item>

            <p-form-item
              :label="item.title"
              v-else-if="item.fieldShowType === 'radio'"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <p-radio-group
                v-decorator="[
                  item.dataIndex,
                  {
                  initialValue: item.defaultValue ,
                  rules:[
                   {
                      required: item.fieldMustInput == '1' ? true :false,
                      message: '请填写完整',
                    },
                  ]
                }
                ]"
              >
                <p-radio
                  :value="items.value"
                  :key="index"
                  v-for="(items,index) in dictOptions[item.customRender]"
                >{{items.title}}</p-radio>
              </p-radio-group>
            </p-form-item>

            <p-form-item
              :label="item.title"
              v-else-if="item.view === 'Date' || item.fieldShowType === 'date'"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <template v-if="item.fieldShowType === 'group'">
                <p-date-picker
                  format="YYYY-MM-DD"
                  placeholder="请选择开始时间"
                  valueFormat="YYYY-MM-DD"
                  v-decorator="[
                    item.dataIndex+'_begin',
                    {
                      initialValue: item.defaultValue ,
                      rules:[
                      {
                          required: item.fieldMustInput == '1' ? true :false,
                          message: '请选择开始时间',
                        },
                      ]
                    }
                  ]"
                />~
                <p-date-picker
                  format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD"
                  placeholder="请选择结束时间"
                  v-decorator="[
                    item.dataIndex+'_end',
                    {
                      initialValue: item.defaultValue ,
                      rules:[
                      {
                          required: item.fieldMustInput == '1' ? true :false,
                          message: '请选择结束时间',
                        },
                      ]
                    }
                  ]"
                />
              </template>
              <template v-else>
                <p-date-picker
                  placeholder="请选择时间"
                  v-decorator="[
                    item.dataIndex,
                    {
                      initialValue: item.defaultValue ,
                      rules:[
                      {
                          required: item.fieldMustInput == '1' ? true :false,
                          message: '请选择时间',
                        },
                      ]
                    }
                  ]"
                />
              </template>
            </p-form-item>

            <p-form-item
              :label="item.title"
              v-else-if="item.view === 'Date' || item.fieldShowType === 'datetime'"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <template v-if="item.fieldShowType === 'group'">
                <p-date-picker
                  format="YYYY-MM-DD"
                  placeholder="请选择开始时间"
                  valueFormat="YYYY-MM-DD"
                  v-decorator="[
                    item.dataIndex+'_begin',
                    {
                      initialValue: item.defaultValue ,
                      rules:[
                      {
                          required: item.fieldMustInput == '1' ? true :false,
                          message: '请选择开始时间',
                        },
                      ]
                    }
                  ]"
                />~
                <p-date-picker
                  format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD"
                  placeholder="请选择结束时间"
                  v-decorator="[
                    item.dataIndex+'_end',
                    {
                      initialValue: item.defaultValue ,
                      rules:[
                      {
                          required: item.fieldMustInput == '1' ? true :false,
                          message: '请选择结束时间',
                        },
                      ]
                    }
                  ]"
                />
              </template>
              <template v-else>
                <p-date-picker
                  placeholder="请选择时间"
                  v-decorator="[
                    item.dataIndex,
                    {
                      initialValue: item.defaultValue ,
                      rules:[
                      {
                          required: item.fieldMustInput == '1' ? true :false,
                          message: '请选择时间',
                        },
                      ]
                    }
                  ]"
                />
                
              </template>
            </p-form-item>


            <p-form-item
              :label="item.title"
              v-else-if="item.view === 'Integer'"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <template v-if="item.fieldShowType === 'single'">
                <p-input-number
                  style="width: 100%"
                  v-decorator="[
                    item.dataIndex,
                    {
                      initialValue: item.defaultValue ,
                      rules:[
                      {
                          required: item.fieldMustInput == '1' ? true :false,
                          message: '请填写完整',
                        },
                      ]
                    }
                  ]"
                  :placeholder="item.placeholder"
                />
              </template>
            </p-form-item>

            <p-form-item
              :label="item.title"
              v-else-if="item.fieldShowType === 'textarea'"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >

              <p-textarea :placeholder="'请输入'+item.title" v-decorator="[item.dataIndex]" />
              
            </p-form-item>

            <p-form-item
              :label="item.title"
              v-else-if="item.fieldShowType === 'cat_tree'"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-tree-select
                v-model="formData[item.dataIndex]"
                placeholder="请选择"
                :dict="item.customRender"
                pidField="parent_id"
                pidValue=""
              />
            </p-form-item>
            
          </template>
        </p-form>
      </p-spin>
    </div>
  </p-modal>
</template>

<script>
import moment from "moment";
import JDictSelectTag from "@/components/dict/JDictSelectTag.vue";
import JTreeSelect from "@/components/jeecg/JTreeSelect.vue"
import { validateDuplicateValue } from "@/utils/util";

export default {
  name: "FxArticleModal",
  components: {
    JDictSelectTag,
    JTreeSelect
  },
  props: {
    getList: {
      type: Array,
    },
    title:{
      type:String,
    },
    dictOptions:{
      type:Object,
    }
  },
  watch:{
      getList(val) {
        console.log(val)
        deep:true,
        this.queryInfo = val;
      },
      title(val) {
        deep:true,
        this.title = val;
      },
      dictOptions(val) {
        console.log(val)
        deep:true,
        this.dictOptions = val;
      },
  },
  data() {
    return {
      formData: {},
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        }
      },

      form: this.$form.createForm(this),
      titleName: this.title,
      width: 800,
      visible: false,
      confirmLoading: false,
      queryInfo: [],
      option:{}
    };
  },
  created() {},
  methods: {
    moment,
    modalShow() {
      this.visible = true;
    },
    close() {
      this.$emit("close");
      this.visible = false;
    },
    // 格式化日期
    handleParams(obj) {
      let tempObj = {};
      for (let [key, value] of Object.entries(obj)) {
        // 判断moment
        if (
          Object.prototype.toString.call(value) === "[object Object]" &&
          value._isAMomentObject
        ) {
          value = moment(value).format("YYYY-MM-DD");
        }
        // 若是为字符串则清除两边空格
        if (value && typeof value === "string") {
          value = value.trim();
        }
        tempObj[key] = value;
      }
      return tempObj;
    },

    handleOk() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("处理前的" + values);
          // 格式化日期
          const queryParams = this.handleParams(values);
          // 处理后的数据
          var param = Object.assign(queryParams, this.formData);
          console.log(param);
        }
      });
    },
    handleCancel() {
      this.close();
    }
  }
};
</script>
